<!--
 * @Author: linZeJian
 * @Date: 2022-11-01 15:55:07
 * @LastEditors: linZeJian
 * @LastEditTime: 2022-11-08 14:29:50
 * @Description: 
-->

<template>
  <view>
    <view v-for="(item, index) in option.column" :key="item.prop">
      <template
        v-if="
          item.type == 'input' ||
          item.type == 'password' ||
          item.type == 'textarea'
        "
      >
        <!-- // a-uni-input组件测试与实现,结果配置auni-input即可，其它都会响应了？？？bug,还是得一个一个配置 -->
        <auni-input :option="item" v-model="form" @change="change"></auni-input>
        <!-- {{form[item.prop]}}{{item.prop}}{{form}} -->
      </template>
      <template v-else-if="item.type == 'number'">
        <auni-number :option="item" v-model="form[item.prop]"></auni-number>
      </template>
      <template v-else-if="item.type == 'map'">
        <auni-city-picker
          :option="item"
          v-model="form[item.prop]"
        ></auni-city-picker>
      </template>
      <template v-else-if="item.type == 'radio'">
        <auni-radio :option="item" v-model="form[item.prop]"></auni-radio>
      </template>
      <template v-else-if="item.type == 'checkbox'">
        <auni-checkbox :option="item" v-model="form[item.prop]"></auni-checkbox>
      </template>
      <template v-else-if="item.type == 'select'">
        <auni-select :option="item" v-model="form[item.prop]"></auni-select>
      </template>
      <template v-else-if="item.type == 'cascader'">
        <auni-cascader :option="item" v-model="form[item.prop]"></auni-cascader>
      </template>
      <template v-else-if="item.type == 'date'">
        <auni-date :option="item" v-model="form[item.prop]"></auni-date>
      </template>
      <template v-else-if="item.type == 'datetime'">
        <auni-datetime :option="item" v-model="form[item.prop]"></auni-datetime>
      </template>
      <template v-else-if="item.type == 'time'">
        <auni-time :option="item" v-model="form[item.prop]"></auni-time>
      </template>
      <template v-else-if="item.type == 'switch'">
        <auni-switch :option="item" v-model="form[item.prop]"></auni-switch>
      </template>
      <template v-else-if="item.type == 'rate'">
        <auni-rate :option="item" v-model="form[item.prop]"></auni-rate>
      </template>
      <template v-else-if="item.type == 'slider'">
        <auni-slider :option="item" v-model="form[item.prop]"></auni-slider>
      </template>
      <template v-else-if="item.type == 'upload'">
        <auni-upload :option="item" v-model="form[item.prop]"></auni-upload>
      </template>
      <template v-else-if="item.type == 'customUpload'">
        <auni-upload-custom
          :option="item"
          v-model="form[item.prop]"
        ></auni-upload-custom>
      </template>
      <template v-else-if="item.type == 'customInfo'">
        <auni-info-custom
          :option="item"
          v-model="form[item.prop]"
        ></auni-info-custom>
      </template>
      <template v-else-if="item.type == 'dynamic'">
        <auni-dynamic
          :option="item"
          :value="form"
          @change="change"
        ></auni-dynamic>
      </template>
      <template v-else-if="item.type == 'customCrud'">
        <auni-crud-custom
          :option="item"
          :value="form"
          @change="change"
        ></auni-crud-custom>
      </template>
      <template v-else-if="item.type == 'customGroup'">
        <auni-group-custom
          :option="item"
          :value="form"
          @change="change"
        ></auni-group-custom>
      </template>
      <template v-else>
        <auni-undefined
          :option="item"
          v-model="form[item.prop]"
        ></auni-undefined>
      </template>
    </view>
  </view>
</template>

<script>
export default {
  name: "forms-item",
  props: {
    option: {
      type: Object,
      default: () => {},
    },
    forms: {
      type: Object,
      default: () => {},
    },
    // form: {
    //   type: Object,
    //   default: () => {},
    // },
    value: [String, Number, Object],
  },
  data() {
    return {
      form: {},
    };
  },
  created() {
    // console.log("this.form111111", this.forms);
    // console.log('this.value111111', this.value);
    this.form = this.forms;
  },
  watch: {
    form: {
      deep: true,
      immediate: true,
      handler(newV) {
        // console.log("forms-item form :>> ", newV);
        // 触发value绑定值的交互与更新
        // this.$emit("input", newV);
        this.$emit("change", newV);
      },
    },
    // value: {
    //   deep: true,
    //   immediate: true,
    //   handler(newV) {
    //     console.log('input watch :>> ', newV);
    //     // 触发value绑定值的交互与更新
    //     this.$emit("input", newV);
    //   },
    // },
  },
  methods: {
    // a-uni-input组件测试与实现
    change(eeee, prop) {
      // console.log("eeee :>> ", eeee);
      // console.log("prop :>> ", prop);
      // console.log("this.form", this.form);
      this.form[prop] = eeee;
      this.$emit("change", this.form);
      // if (type){
      //   this.$emit("change", this.form);
      // }
    },
    // 这个方法只有每次点击打开弹框时候才会触发---相当于自己的一个created---在这个方法内做初始化
    first() {
      uni.showToast({
        title: '打开就触发first',
        icon: 'success',
        mask: true
      })
    },
  },
};
</script>

<style></style>
